svg {
    stroke: #33003D;
    fill: transparent;
    stroke-width: 3px;
}

.connectedLine {
    stroke: blueviolet;
}

.gray {
    stroke: darkgrey;
}

text {
    font-family: 'Droid Sans Mono', monospace;
    font-size: 20px;
    fill: #330050;
    stroke: #330050;
    stroke-width: 1px;
}

#container {
    /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    background:  #eeeeee; */
  }

  
.fourierDiv {
    /* padding-top: 60px; */
    padding-left: 60px;
    width: 100vw;
    /* height: 100vh; */
}
.draw1 {
    /* padding-top: 200px; */
}

.slidecontainer {
    width: 100%;
    padding-bottom: 30px;
    padding-left: 400px;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 200px;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: rgb(39, 39, 39);
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: rgb(39, 39, 39);
    cursor: pointer;
  }